<template>
  <div class="app-container">

    <el-form ref="form" label-width="100%">
      <el-row>
        <el-col :span="24">
          <mavon-editor ref="md" :toolbars="toolbars"  :ishljs = "true" :style="'height:' + height" @imgAdd="imgAdd"   @imgDel="imgDel"  v-model="value"/>
        </el-col>
        <el-col :span="24"  style="margin-top: 50px ;text-align: center">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-plus"
            @click="submit(scope.row)"
          >新增
          </el-button>
        </el-col>
        <el-col :span="24"  style="margin-top: 50px">
          <mavon-editor
            class="md"
            :value="this.value"
            :subfield = "false"
            :defaultOpen = "'preview'"
            :toolbarsFlag = "false"
            :editable="false"
            :scrollStyle="true"
            :ishljs = "true"
          />
        </el-col>
      </el-row>
    </el-form>


  </div>
</template>

<script>
  import common from "@/api/common";
  export default {
    name: 'Markdown',
    data() {
      return {
        value:'',
        height: document.documentElement.clientHeight - 200 + 'px',
        toolbars: {
          bold: true, // 粗体
          italic: true, // 斜体
          header: true, // 标题
          underline: true, // 下划线
          strikethrough: true, // 中划线
          mark: true, // 标记
          superscript: true, // 上角标
          subscript: true, // 下角标
          quote: true, // 引用
          ol: true, // 有序列表
          ul: true, // 无序列表
          link: true, // 链接
          imagelink: true, // 图片链接
          code: true, // code
          table: true, // 表格
          fullscreen: true, // 全屏编辑
          readmodel: true, // 沉浸式阅读
          htmlcode: true, // 展示html源码
          help: true, // 帮助
          /* 1.3.5 */
          undo: true, // 上一步
          redo: true, // 下一步
          trash: true, // 清空
          save: false, // 保存（触发events中的save事件）
          /* 1.4.2 */
          navigation: true, // 导航目录
          /* 2.1.8 */
          alignleft: true, // 左对齐
          aligncenter: true, // 居中
          alignright: true, // 右对齐
          /* 2.2.1 */
          subfield: true, // 单双栏模式
          preview: true, // 预览
        }
      }
    },
    mounted() {
      const that = this
      window.onresize = function temp() {
        that.height = document.documentElement.clientHeight - 200 + 'px'
      }
    },
    methods: {
      submit(){
        console.log(this.value)
      },
      imgAdd(pos, $file) {
        let formData = new FormData();
        formData.append("file", $file);
        common.uploadFile(formData).then(res => {
          const data = res.data
          const url =process.env.VUE_APP_BASE_API_HTTP  +data
          this.$refs.md.$img2Url(pos, url)
        })
      },
      imgDel(pos, url) {
        console.log(pos)
        console.log(url)
      }
    }
  }
</script>

<style scoped>
</style>
